<template>
  <view class="px-3.5 box-border">
    <view class="flex flex-row justify-between items-start py-5">
      <text class="text-[32rpx] color-black grow">{{
        detailInfo.itemName
      }}</text>
      <button class="btn-038AFE btn-normal mr-0 w-[135rpx]" @click="onTransact">
        办理
      </button>
    </view>
    <view class="flex flex-row items-center mb-3.5">
      <image
        :src="flowIcon"
        mode="aspectFit"
        style="width: 35rpx; height: 38rpx"
      ></image>
      <text class="text-[32rpx] color-[#038AFE] ml-1">办理流程</text>
    </view>
    <view
      class="border-[0.8rpx] border-[#BBBBBB] border-solid px-3 py-3.5 box-border min-h-[50vh]"
    >
      <rich-text :nodes="detailInfo.content"></rich-text>
    </view>
    <up-gap height="16"></up-gap>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import flowIcon from "@/static/icon/flow.png";
import { detailWorkGuide, workGuideAddView } from "@/api/workGuide/index";

const uToastRef = <any>ref(null);
const detailInfo = <any>ref({});

onLoad((options) => {
  if (options && options.id) {
    getWordGuideDetail(options.id);
  }
});

// 获取事项详情
const getWordGuideDetail = (id: any) => {
  detailWorkGuide({ id, type: "crowd" })
    .then((res) => {
      const { data } = res;
      detailInfo.value = data;
    })
    .catch((err) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};

// 办理
const onTransact = () => {
  if (detailInfo.value.processingAddress) {
    // 跳转到警快办公众号首页
    workGuideAddView({ id: detailInfo.value.id })
      .then((res) => {})
      .catch((err) => {
        uToastRef.value.show({
          type: "error",
          message: err,
        });
      });
    uni.navigateTo({
      url: `/subPages/crowd/publicAccount/ykb?url=${detailInfo.value.processingAddress}`,
    });
  } else {
    uToastRef.value.show({
      type: "warning",
      message: "请联系管理员配置业务办理地址！",
    });
  }
};
</script>

<style lang="scss" scoped>
.text-list {
  > view {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 30rpx;
    .label {
      white-space: nowrap;
    }
  }
}
</style>
